<template>
	<view class="page-wrap">
		<!-- <image :src="gifUrl" class="splash-bg" mode="center"></image> -->
		<video class="splash-bg" :src="gifUrl" :loop="true" :muted="true" :autoplay="true" :controls="false" object-fit="cover"></video>
		<view class="jump-box" @click="jumpToHome">
			<view class="jump">跳过 ({{ countdown }}s)</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

import { useWxShare } from '@/hook/useWxShare';
// // 使用分享 Hook
const { getShareInfo } = useWxShare();

// 自动更新视图的响应式调用
getShareInfo(2222).then((e) => {
	console.log(e, 2222);
});

const gifUrl = ref('https://www.toolscc.cn/also/page_bg.mp4');
const countdown = ref(3);
const timer = ref(null);

const startCountdown = () => {
	const tick = () => {
		if (countdown.value <= 1) {
			jumpToHome();
			return;
		}
		timer.value = setTimeout(() => {
			countdown.value--;
			tick();
		}, 1000);
	};
	tick();
};

const jumpToHome = () => {
	uni.$uv.debounce(
		() => {
			console.log('跳转至首页');
			// uni.reLaunch({
			// 	url: '/pages/index/index'
			// });
		},
		500,
		true
	);
};

onMounted(() => {
	startCountdown();
});

onUnmounted(() => {
	clearTimeout(timer.value);
});
</script>

<style lang="scss" scoped>
.page-wrap {
	position: relative;
	width: 100vw;
	height: 100vh;
}
.splash-bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
}

.jump-box {
	position: absolute;
	bottom: 120rpx;
	right: 64rpx;

	.jump {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 24rpx;
		font-size: 28rpx;
		color: #ffffff;
		border: 6rpx solid #ffffff;
		border-radius: 40rpx;
		background-color: rgba(255, 255, 255, 0.3);
	}
}
</style>
